The Input Type Attribute Values

Sometimes, you need to create a Web page that contains form elements, such as input fields, which are used to take an input from the user. A form can contain various types of an input fields such as text box, check box, radio button, submit button, image, and reset button. You can define the type of input by using the <input type=”text”> tag. The <input> tag contains the type attribute that defines what type of input needs to be entered by user. By default, it sets its value as text. Therefore, using values in the type attribute of an input field is known as input type attribute values. You can validate the input fields by using JavaScript functions. The validations help user to enter the correct data in the form. HTML 5 has introduced new input type attribute values that also validate the input fields while entering data without using JavaScript functions., given below list all the input type attribute values that are newly introduced in HTML 5:

Type	Description
tel	Defines a telephone number as a value of the input field
search	Defines a search field as a value of the input field
url	Defines a uniform resource locator (URL) of the input field
email	Defines an email as a value of the input field
datetime	Defines a date and time (UTC time) in the input field
date	Defines a date field
month	Defines a month in the input field
week	Defines a week in the input field
time	Defines the input value of type time
datetime-local	Defines that the value of an input type attribute is a local date/time
number	Defines that the value of an input type attribute is number
range	Specifies the range in number for input value
color	Defines the hexadecimal value of color

Let’s do the following steps to see the working of new input type attribute values:

Open a blank Notepad document.

Add the code, given below


<!DOCTYPE html>
<html>
    <head>
        <title> Example of Input type attribute values </title>
    </head>
<body>
    <h3>Showing Email and Date Picker</h3>
    <br>

    <form>
        Enter the valid Email ID:
        <input type="email" name="mail"> <br><br>
        Select date and time:
        <input type="datetime" name="dtVal">
    </form>
</body>
</html>

Save the document with a name like InputTypes.html.

Open the HTML document in the Opera Web browser.

Type a wrong email address in the Enter the valid Email ID text box and press Enter. The output is shown below snapshot:

Input type

Note: all the new input type attribute values are supported in internet explorer: therefore, we have used the Opera Web browser.

You learn more about the input type attribute further in the Tutorial

PRV MENU NEXT

The Input Type Attribute Values

Latest Post